<template>
	<view>
		<!-- 添加购物车底部弹出 -->
		<uni-popup ref="cartPopup" border-radius="20rpx 20rpx 0 0" background-color="#fff" :is-mask-click="false"
			@maskClick="popupClose">
			<uni-card margin="0" class="popup-container">
				<view class="card-top flex-row" slot='title'>
					<view class="image-container">
						<image class="image" :src="wannaBuyGoods.mainPic ? apiImgPrefix + wannaBuyGoods.mainPic : ''"></image>
					</view>
					<view class="info">
						<text class="name">{{wannaBuyGoods.name}}</text>
						<text class="price">￥{{wannaBuyGoods.price}}</text>
					</view>
				</view>
				<view class="uni-body">
					<view class="goods-specs flex-row">
						<text class="text">规格：</text>
						<uni-tag :inverted="true" :text="`母：${wannaBuyGoods.specs_female[0]}两 · ${wannaBuyGoods.specs_female[1]}只`"
							type="success" class="uni-tag" />
						<uni-tag :inverted="true" :text="`公：${wannaBuyGoods.specs_male[0]}两 · ${wannaBuyGoods.specs_male[1]}只`"
							type="warning" class="uni-tag" />
					</view>
					<view class="quantity flex-row">
						<text class="text">数量：</text>
						<uni-number-box :min="1" v-model="wannaBuyGoods.quantity" />
					</view>
				</view>
				<view slot='actions' class="card-footer flex-row">
					<button class="button"
						style="background-color: #ffa200; height: 60rpx; border-radius: 30rpx; color: #fff; line-height: 60rpx; font-weight: normal; font-size: 28rpx; width: 40vw;"
						@click="addToCart()">加入购物车</button>
					<button class="button"
						style="background-color: #ff5a00; height: 60rpx; border-radius: 30rpx; color: #fff; line-height: 60rpx; font-weight: normal; font-size: 28rpx; width: 40vw;">立即购买</button>
				</view>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script>
	import {
		API
	} from '@/config/index.js'
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		props: ["goodsData", "isScroll"],
		data() {
			return {
				apiImgPrefix: API + '/api/',
				wannaBuyGoods: {},
				isScrollToTop: false
			}
		},
		mounted() {
			
		},
		methods: {
			// 底部添加购物车弹出
			popupOpen() {
				this.$refs['cartPopup'].open('bottom')
				// console.log(this.goodsData)
				this.wannaBuyGoods = {...this.goodsData}
				this.wannaBuyGoods.quantity = 1
				this.wannaBuyGoods.selected = true; //设置默认勾选
				this.isScrollToTop = this.isScroll;
			},
			popupClose() {
				this.$refs["cartPopup"].close();
			},
			addToCart() {
				// 从 localStorage 获取现有数组
				let cart = uni.getStorageSync('cartList') || []
				// console.log(cart)
				// 查找数组中是否存在相同的 productId
				let existingItemIndex = cart.findIndex(item => item.id === this.wannaBuyGoods.id);
				if (existingItemIndex !== -1) {
					// 如果存在，则增加数量并设置默认勾选
					cart[existingItemIndex].quantity += this.wannaBuyGoods.quantity;
				} else {
					// 如果不存在，则新增数据
					cart.push({
						...this.wannaBuyGoods
					});
				}

				// 将更新后的数组保存回 localStorage
				uni.setStorageSync('cartList', cart)
				uni.$emit('updateCartList', cart)
				uni.showToast({
					icon: 'success',
					title: '添加购物车成功',
					duration: 1000,
					success: () => {
						this.popupClose();
						uni.$emit('refreshSomething')
						if (this.isScrollToTop) {
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 300
							})
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.flex-row {
		display: flex;
		align-items: center;
	}

	// 底部添加购物车弹出

	// 购买popup
	/deep/.popup-container {
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx;
		overflow: hidden;

		.uni-card {
			background-color: transparent !important;
			box-shadow: none !important;
			border: none !important;

			.card-top {
				padding-bottom: 20rpx;
				border-bottom: 1px solid #dedede;

				.image-container {
					width: 20vw;
					// height: 20vw;
					padding-top: 20vw;
					position: relative;
					overflow: hidden;
					margin-right: 30rpx;

					.image {
						position: absolute;
						left: 0;
						top: 0;
						object-fit: cover;
						width: 100%;
						height: 100%;
					}
				}

				.info {
					display: flex;
					flex-direction: column;

					.name {
						font-size: 28rpx;
						margin-bottom: 40rpx;
					}

					.price {
						font-size: 30rpx;
						font-weight: bold;
						color: #ff5a00;
					}
				}
			}

			.uni-body {
				.text {
					color: #333;
				}

				.goods-specs {
					padding: 20rpx 0;

					.uni-tag {
						margin-right: 10rpx;
					}
				}

				.quantity {
					padding: 20rpx 0;
				}
			}

			.card-footer {
				padding-top: 20rpx;
				border-top: 1px solid #dedede;
				justify-content: space-around;
			}
		}
	}
</style>